<template>
  <div>
    <a-form layout="inline" :model="queryModel" v-if="searchBox">
      <a-form-item label="关键字">
        <a-input v-model:value="queryModel.keyWord" placeholder="请输入搜索关键字" />
      </a-form-item>
      <a-space>
        <a-button type="primary" @click="list">查询</a-button>
        <a-button @click="resetQuery">重置</a-button>
      </a-space>
    </a-form>
    <div class="functionBox">
      <a-space class="left">
        <a-button type="dashed" :icon="h(PlusOutlined)" @click="operator(0)">新增</a-button>
      </a-space>
      <a-space class="right">
        <a-button size="small" shape="circle" :icon="h(ReloadOutlined)" @click="list()" />
        <a-button size="small" shape="circle" :icon="h(SearchOutlined)" @click="() => searchBox = !searchBox" />
      </a-space>
    </div>
    <div ref="basePoint" :style="`height: ${ windowHeight - elementToTopHight - 7 }px !important;`">
      <a-table
          :columns="columns"
          :pagination="false"
          :locale="{ emptyText: '暂无数据' }"
          :data-source="tableData"
          @resizeColumn="handleResizeColumn"
          :scroll="{ y: ( windowHeight - elementToTopHight - 116 ) + 'px' }"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'establishedDate'">
            <span>{{ proxy.parseTime(record.establishedDate, '{yyyy}-{mm}-{dd}') }}</span>
          </template>
          <template v-if="column.dataIndex === 'action'">
            <a-button type="link" @click="operator(1, record.id)">编辑</a-button>
            <a-popconfirm title="是否要真的删除这个物业嘛!" @confirm="remove(record.id)">
              <template #icon><question-circle-outlined style="color: red" /></template>
              <a-button type="link">删除</a-button>
            </a-popconfirm>
<!--            <a-button type="link">更多</a-button>-->
          </template>
        </template>
      </a-table>
      <div class="pagination">
        <a-pagination
            size="small"
            :disabled="total == 0"
            :total="total"
            show-size-changer
            @change="pageChange"
            show-quick-jumper />
      </div>
    </div>

    <a-modal
        width="660px"
        v-model:open="operatorStore.open"
        :title="operatorStore.cmd == 0 ? '新增物业' : '编辑物业'"
        @ok="submitOperator"
        @cancel="resetFrom">
      <a-form
          :model="property"
          :rules="rules"
          labelAlign="right"
          :label-col="{ style: { width: '100px' } }"
          ref="formRef"
      >
        <a-row :gutter="[18,0]">
          <a-col :span="12">
            <a-form-item label="物业名称" name="propertyName">
              <a-input v-model:value="property.propertyName" placeholder="请输入物业名称" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="小区名称" name="communityName" >
              <a-input v-model:value="property.communityName" placeholder="请输入小区名称" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="[18,0]">
          <a-col :span="12">
            <a-form-item label="小区地址" name="address">
              <a-input v-model:value="property.address" placeholder="请输入小区地址" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="负责人" name="contactPerson" >
              <a-input v-model:value="property.contactPerson" placeholder="请输入物业负责人" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="[18,0]">
          <a-col :span="12">
            <a-form-item label="联系电话" name="phoneNumber">
              <a-input v-model:value="property.phoneNumber" placeholder="请输入联系电话" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="邮箱" name="email" >
              <a-input v-model:value="property.email" placeholder="请输入邮箱" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="[18,0]">
          <a-col :span="12">
            <a-form-item label="物业费" name="propertyFee">
              <a-input type="number" v-model:value="property.propertyFee" placeholder="请输入物业费收费标准" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="水费" name="waterFee" >
              <a-input type="number" v-model:value="property.waterFee" placeholder="请输入水费收费标准" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="[18,0]">
          <a-col :span="12">
            <a-form-item label="气费" name="gasFee">
              <a-input type="number" v-model:value="property.gasFee" placeholder="请输入气费收费标准" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="电费" name="electricityFee" >
              <a-input type="number" v-model:value="property.electricityFee" placeholder="请输入电费收费标准" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="[18,0]">
          <a-col :span="12">
            <a-form-item label="建成时间" name="establishedDate">
              <a-date-picker v-model:value="property.establishedDate" placeholder="请选择建成时间" style="width: 100%" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="物业类型" name="propertyType" >
              <a-input  v-model:value="property.propertyType" placeholder="请输入物业类型" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="[18,0]">
          <a-col :span="12">
            <a-form-item label="建筑面积" name="buildingArea">
              <a-input type="number" v-model:value="property.buildingArea" placeholder="请输入建筑面积" />
            </a-form-item>
          </a-col>
<!--          <a-col :span="12">-->
<!--            <a-form-item label="绑定管理员" name="userId">-->
<!--              <a-select-->
<!--                  v-model:value="property.userId"-->
<!--                  show-search-->
<!--                  placeholder="请选择物业管理员进行绑定"-->
<!--                  :options="userData"-->
<!--                  :filter-option="filterUserOption"-->
<!--              >-->
<!--              </a-select>-->
<!--            </a-form-item>-->
<!--          </a-col>-->
        </a-row>
        <a-form-item label="小区介绍" >
          <a-textarea v-model:value="property.communityDescription" placeholder="请输入小区介绍" :rows="4" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
    import useProperty from "@/hooks/useProperty"
    import DynamicHeight from "@/utils/DynamicHeight";
    import {h} from "vue";
    import {
      DeleteOutlined,
      PlusOutlined,
      QuestionCircleOutlined,
      ReloadOutlined,
      SearchOutlined
    } from "@ant-design/icons-vue";
    const { basePoint , windowHeight , elementToTopHight } = DynamicHeight();
    import { getCurrentInstance } from 'vue';
    const {
      searchBox, queryModel, list,
      resetQuery , total , pageChange ,
      operatorStore, handleResizeColumn ,
      columns, tableData , submitOperator ,
      resetFrom , formRef , operator , property,
      rules , userData , filterUserOption , remove
    } = useProperty();
    const { proxy } = getCurrentInstance();
</script>

<style scoped lang="scss">
    .functionBox {
      margin: 18px 0 12px 0;
      display: flex;
      justify-content: space-between;
    }
    .pagination {
      margin: 8px 0;
      display: flex;
      justify-content: end;
    }
</style>
